<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>百Girl全书--文章发布</title>
<!-- Le styles -->
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-responsive.css">
<link rel="stylesheet" type="text/css" href="/ueditor/themes/default/ueditor.css" />
<style type="text/css">
	body {
		padding-top: 60px;
		padding-bottom: 40px;
	}
	.sidebar-nav {
		padding: 9px 0;
	}
	.app_check_red{
		color:red;
	}
	.form_validate .app_check_red{
		display:block;
	}
	.details{
		margin-bottom:9px;
	}
</style>
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- 注意：twitter bootstrap 需要jquery1.7以上版本 -->
<script type="text/javascript" charset="UTF-8" src="/js/jquery-1.7.2.min.js"></script>
<!-- 表单校验插件validate -->
<script type="text/javascript" charset="UTF-8" src="/js/plugins/jquery.validate.min.js"></script>
<!-- twitter bootstrap -->
<script type="text/javascript" charset="UTF-8" src="/bootstrap/js/bootstrap.min.js"></script>
<!-- ueditor富文本编辑器 -->
<script type="text/javascript" charset="UTF-8"">window.UEDITOR_HOME_URL = "/ueditor/";</script>
<script type="text/javascript" charset="UTF-8" src="/ueditor/editor_config.js"></script>
<script type="text/javascript" charset="UTF-8" src="/ueditor/editor_all.js"></script>
</head>
<body>
	<!-- 公用头部 -->
	<%@ include file="../header.jsp"%>
	<div class="container-fluid">
		<div class="row-fluid">
			<!-- 公用左部 -->
			<%@ include file="../left.jsp"%>
			<div class="span10">
		        <div class="">
		        	<form id="artForm" class="well form_validate" action="/article/save" method="post">
					    <label>文章标题：</label>
					    <input id="title" name="title" type="text" class="span5"/>
					    <label style="margin-top:5px;">文章导读：</label>
					    <textarea id="summary" name="summary" rows="3" class="input-xlarge" style="width:850px;"></textarea>
					    <label style="margin-top:5px;">文章内容：</label>
					    <div class="details">
			                <div style="width:860px;">
			                    <script type="text/plain" id="editor" name="content"></script>
			                    <div class="con-split"></div>
			                </div>
			            </div>
			            <textarea name="content" id="ueditor_textarea_content" style="display: none;"></textarea>
			            <div style="margin-top:50px;">
					    	<button type="submit" class="btn btn-primary btn-large" id="submitBtn">&nbsp;提&nbsp;&nbsp;交&nbsp;</button>
					    </div>
				    </form>
		        </div>
			</div>
		</div>
		<hr>
		<!-- 公用底部 -->
		<%@ include file="../footer.jsp"%>
	</div>
</body>
</html>
<script type="text/javascript">
	$(document).ready(function() {
		//选中操作键
		$("#publish").addClass("active");
		$("#article").addClass("active");
		//初始化富文本编辑器
		var ue = new UE.ui.Editor();
		ue.render('editor');
		
		//为富文本增加校验事件
		$.validator.addMethod("checkEditor", function(value, element) {
			var content = ue.getContent();
			if(content == null || content == '')
			{
				return false;
			}
			else
			{
				return true;
			}
		}, "内容不能为空");
		
		//初始化校验插件
		$("#artForm").validate({
			focusInvalid : false,
			onkeyup : false,
			onfocusout:false,
			onsubmit:true,
			focusCleanup : true,
			debug : true,
			errorClass : "app_check_red",
			errorElement : "cite",
			// 公用错误提示class
			ignore : ".ignore",
			rules : 
			{
				title : 
				{
					required : true,
					maxlength : 100
				},
				summary : 
				{
					required : true,
					maxlength : 300
				},
				content : 
				{
					checkEditor : true
				}
			},
			messages : 
			{
				title : 
				{
					required : "标题不能为空",
					maxlength : "标题不能长于100个字"
				},
				summary : 
				{
					required : "导读不能为空",
					maxlength : "标题不能长于300个字"
				},
				content : 
				{
					checkEditor : "内容不能为空"
				}
			},
			showErrors : function(errorMap, errorList) {
				this.defaultShowErrors();
			},
			errorPlacement : function(error, element) {
				error.insertAfter(element);
			},
			// 成功提交
			submitHandler : function() 
			{
	        	this.currentForm.submit();
			}
		});
	});
</script>